import api from '@/api/system/dept';
import { reactive, ref, onMounted, h, toRaw } from 'vue';
import { BasicColumn } from '@/design/components/Table';
import { ElMessage, ElTag } from 'element-plus';
import { handleTree } from '@/utils/tree';

export function useDept() {
  // 数据列表
  const list = ref([]);
  // 加载状态
  const loading = ref(true);

  // 查询数据
  const query = reactive({
    name: '',
    code: '',
    status: '',
  });

  const columns: BasicColumn[] = [
    {
      label: '部门名称',
      prop: 'name',
    },
    {
      label: '部门编码',
      prop: 'code',
    },
    {
      label: '排序',
      prop: 'sort',
    },
    {
      label: '状态',
      prop: 'status',
      render({ row: record }) {
        return h(
          ElTag,
          {
            type: record.status === 1 ? 'success' : 'danger',
          },
          {
            default: () => (record.status === 1 ? '正常' : '禁用'),
          },
        );
      },
    },
    {
      label: '备注',
      prop: 'note',
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
  ];

  /**
   * 查询事件
   */
  async function hdlList() {
    const res = await api.list(toRaw(query));
    // 这里是返回一维数组结构，前端自行处理成树结构
    // 返回格式要求：唯一id加父节点parentId，parentId取父节点id
    list.value = handleTree(res);
  }

  /**
   * 删除事件
   * @param row
   */
  function hdlDelete(row) {
    api.delete(row.id).then(() => {
      ElMessage.success('删除成功');
      hdlList();
    });
  }

  /**
   * 初始化
   */
  onMounted(() => {
    hdlList();
  });
  // 返回hook的公共方法和响应式数据
  return {
    query,
    loading,
    list,
    columns,
    hdlList,
    hdlDelete,
  };
}
